<template>
  <el-card
    ><template #header>
      <i class="el-icon-back" @click="$router.go(-1)"></i>
      订单的详情
    </template>
    <div class="main">
      <ul>
        <li><span>订单号:</span>{{ form.orderNo }}</li>
        <li><span>下单时间:</span>{{ form.orderTime }}</li>
        <li><span>电话:</span>{{ form.phone }}</li>
        <li><span>收货人:</span>{{ form.consignee }}</li>
        <li><span>送货地址:</span>{{ form.deliverAddress }}</li>
        <li><span>送达时间:</span>{{ form.deliveryTime }}</li>
        <li><span>备注:</span>{{ form.remarks }}</li>
        <li><span>订单金额:</span>{{ form.orderAmount }}</li>
        <li><span>订单状态:</span>{{ form.orderState }}</li>
      </ul>
      <div>
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-card>
</template>

<script>
import moment from 'moment'
import { detail } from '../../api/list'
export default {
  data() {
    return {
      form: [],
      activities: [
        {
          content: '活动按期开始',
          timestamp: '2018-04-15'
        },
        {
          content: '通过审核',
          timestamp: '2018-04-13'
        },
        {
          content: '创建成功',
          timestamp: '2018-04-11'
        }
      ]
    }
  },
  created() {
    this.$route.query.data.orderTime = moment(
      this.$route.query.data.orderTime
    ).format('YYYY-MM-DD HH:mm:ss')
    this.form = this.$route.query.data
  }
}
</script>

<style lang="less" scoped>
li {
  padding: 10px;
  span {
    display: inline-block;
    width: 100px;
  }
}
.main {
  display: flex;
  ul,
  div {
    flex: 1;
  }
}
</style>
